<template>
    <div class="main-content">
        <levelbar></levelbar>
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="40px">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="月份">
                                <el-date-picker v-model="query.month" :clearable='false' :editable="false" :picker-options="pickerOptions" type="month" placeholder="请选择月份" style="width:100%"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts1"  v-loading="loading" >
                <div class="charts-title">课程点击量趋势图</div>
                <div class="charts-display">
                   <trendChart width='100%' height='100%' id="trendChart" :option='trendChartOption'></trendChart>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import moment from 'moment';
    import { countProject } from 'api/manageAnalysis';
    export default{
        components: { echartsLayout, Levelbar, trendChart},
        data() {
            return {
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: true,
                trendChartOption: null,
                query: {
                    month: new Date()
                },
                loading: false,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            }
        },
        created() {
            this.getChartData();
        },
        methods: {
            submit() {
                this.getChartData();
            },
            getChartData() {
                let timeRange = this.query.month?moment(new Date(this.query.month)).format('YYYY-MM'):moment(new Date()).format('YYYY-MM');
                this.loading = true;
                countProject(timeRange).then(res => {
                    this.loading = false;
                    this.drawChart(res.data.content);
                }).catch(() => {
                    this.loading = false;
                });
            },
            drawChart(data) {
                let eCasperList = [];
                let subjectTutorList = [];
                let xAxisList = [];
               
                data = data.sort(function(a, b) {
                
                    let aData = a.date.split('-')[1];
                    let bData = b.date.split('-')[1];
                    return aData - bData;
                });
                
                data.forEach(item => {
                    xAxisList.push(item.date);
                    eCasperList.push(item.lostUserNumber);
                    subjectTutorList.push(item.uninstallUserNumber);
                }, this);
                this.trendChartOption = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['e启学霸', '学科辅导']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        // axisLabel: {
                        //     rotate: 45,   
                        //     interval: 0
                        // },
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    color: ['#B5C334', '#C1232B'],
                    series: [
                        {
                            name: 'e启学霸',
                            type: 'line',
                            data: eCasperList
                        },
                        {
                            name: '学科辅导',
                            type: 'line',
                            data: subjectTutorList
                        }
                    ]
                };
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        padding: 20px 20px 10px;
        width: 1400px;
        margin: 0 auto;
    }
</style>                     